<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .slide-in-bck-left {
                width: 200px;
                height: 200px;
                float: right;
                background-color: #f00;
                -webkit-animation: slide-in-bck-left 3s
                    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
                animation: slide-in-bck-left 3s
                    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
            }
            /* ----------------------------------------------
            * Generated by Animista on 2022-12-9 9:20:30
            * Licensed under FreeBSD License.
            * See http://animista.net/license for more info. 
            * w: http://animista.net, t: @cssanimista
            * ---------------------------------------------- */

            /**
            * ----------------------------------------
            * animation slide-in-bck-left
            * ----------------------------------------
            */
            @-webkit-keyframes slide-in-bck-left {
                0% {
                    -webkit-transform: translateZ(700px) translateX(-400px);
                    transform: translateZ(700px) translateX(-400px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translateZ(0) translateX(0);
                    transform: translateZ(0) translateX(0);
                    opacity: 1;
                }
            }
            @keyframes slide-in-bck-left {
                0% {
                    -webkit-transform: translateZ(700px) translateX(-400px);
                    transform: translateZ(700px) translateX(-400px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translateZ(0) translateX(0);
                    transform: translateZ(0) translateX(0);
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <button onclick="fun()">点击</button>
        <div id="box"></div>
    </body>
    <script>
        function fun() {
            var box = document.getElementById('box')
            box.className = 'slide-in-bck-left'
        }
    </script>
</html>
